<template>
  <div>
    <dl class="m-area">
      <dt>按拼音首字母选择</dt>
      <dd v-for="item in list" :key="item">
        <a :href="'#city-' + item">{{item}}</a>
      </dd>
    </dl>
    <dl class="m-area-section" v-for="v in city" :key="v.title">
      <dt :id="'city-' + v.title">{{v.title}}</dt>
      <dd>
        <span  v-for="j in v.city" :key="j.name">{{j.name}}</span>
      </dd>
    </dl>    

    
  </div>

</template>
<script>
import pyjs from 'js-pinyin'
export default {
  data() {
    return {
      list:'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
      city: []
    }
  },
  async mounted() {
    let {status, data} = await this.$store.dispatch('api/getAllCitys')
    if (status === 200 && data.code === 0) {
      let p, c, d = {}
      data.city.forEach(item => {
        p = pyjs.getFullChars(item.name).toLowerCase().slice(0, 1)
        c = p.charCodeAt(0)
        if (!d[p]) {
          d[p] = []
        }
        d[p].push(item)
      })
      let arr = []
      for(let [key, v] of Object.entries(d)) {
        arr.push({
          title: key.toUpperCase(),
          city: v
        })
      }
      arr.sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0))
      this.city = arr
    }
  }
}
</script>
<style lang="scss">
@import "@/assets/css/changeCity/area.scss";
</style>